.home-page {
  width: 100%;

  image {
    width: 100%;
    vertical-align: bottom;
  }

  .items {
    display: flex;
    justify-content: space-around;
    color: #fff;
    background-color: #3b3f45;
    font-size: 28rpx;
    padding: 10rpx 0;
  }

  .swiper-box {
    padding: 0 30rpx;
    margin: 20rpx 0;

    .swiper {
      height: 400rpx;

      image {
        height: 400rpx;
      }
    }
  }

  .banner image {
    width: 100%;
    height: 100%;
    border-radius: 8rpx;
  }

  .banner {
    display: flex;
    padding: 0 20rpx;
    height: 620rpx;

    .banner-left {
      margin-right: 20rpx;
      width: 50%;
    }

    .banner-right {
      flex: 1;
      display: flex;
      flex-direction: column;

      .banner-right-top {
        height: 50%;
        margin-bottom: 20rpx;
      }

      .banner-right-bottom {
        height: 50%;
      }
    }
  }

  .custom {
    margin-top: 20rpx;
    padding: 0 20rpx;
  }

  .tab {
    background: #eff0f2;
  }

  .tab-active {
    color: #000;
    background-color: #fff;
  }

  .recommend {
    margin-top: 20rpx;
    display: flex;
    height: 1200rpx;

    .recommend-left {
      width: 50%;
      margin-right: 10rpx;

      image {
        height: 100%;
      }
    }

    .recommend-right {
      width: 50%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      image {
        height: 290rpx;
      }
    }
  }

  .prediction {
    position: relative;

    .text {
      position: absolute;
      top: 5%;
      left: 50%;
      transform: translateX(-50%);
      font-size: 38rpx;
      color: #999;
    }
  }

  .cutoff-group {
    margin-top: 20rpx;
    display: flex;

    .cutoff-group-left {
      width: 50%;
      margin-right: 20rpx;

      image {
        height: 100%;
        border-radius: 16rpx;
      }
    }

    .cutoff-group-right {
      width: 50%;
      text-align: right;

      .name {
        font-size: 36rpx;
        font-weight: 500;
      }

      .name,
      .price {
        margin-bottom: 30rpx;
      }

      .price .now {
        font-size: 40rpx;
        font-weight: 600;
        margin-right: 20rpx;
      }

      .price .old {
        font-size: 30rpx;
        text-decoration: line-through;
        color: #999da6;
      }

      .deadTime {
        font-size: 30rpx;
        color: #999da6;
      }
    }
  }
}